<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/*css 样式思路
			1.通配选择器：微软雅黑、#f5f5f5 浅灰、外边距至0
			2.#product_card：边框、内边距、外边距、阴影【透明度.1】、文字居中
			3.img：边框倒角、内外边距？【微调】
			4.h3：颜色、内外边距？【微调】
			5.p：字体大小、颜色
			6.p+span:span、内外边距？【微调】、颜色
			*/
			div#product_card{
				border: 1px solid lightgray;
				width:280px;
				height:520px;
				border-radius: 10px;
				box-shadow: 1px 1px 1px 1px lightgray;
			}
			img{
				padding: 10px;
				border: 5px solid transparent;
				border-radius:25px;
				
			}
			h3{
				text-align:center;
				font-size: 15px;
			}
		    #money{
				text-align:center;
				color: #ff0000;
				font-size: 20px;
			}
			p#ping{
				text-align:center;
				color: darkgrey;
				font-size: 5px;
			}
				
			#search{
				margin-top: 10px;
				border: 1px solid lightgray;
				width:200px;
				height:33px;
				border-radius: 5px;
				box-shadow:  1px 1px 1px lightgray;
				
			}
			#text1{
				border: 5px solid transparent;
				border-radius:37px;
				font-size: 1px;
				color: #838383;
				margin-top: 5px;
				margin-left: 9px;
			}
			#text2{
				border: 1px solid transparent;
				border-radius:5px;
				box-shadow:  1px 1px 1px lightgray;
				text-align:center;
				width:40px;
				height:19px;
				font-size: 1px;
				background: #ff0000;
				color: #ffffff;
				margin-top:-25px;
				margin-left: 150px;
			}
		</style>
	</head>
	<body>
		<!-- 网页：1.html  结构【原生图分析】 -->
		<div id="product_card">
			<img src="img/微信图片_20241225100524.jpg" width="249px" height="350px" alt="汽车">
			<h3>小米SU7</h3>
			<p id="money">￥279999.00</p>
			<p id="ping">已有<span>10万+</span>评价</p>
		</div>
		<div id=search>
			<p id="text1">搜索 京东商品</p>
			<p id="text2">搜索</p>
		</div>
	</body>
</html>